<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 200px;
				height: 200px;
				background: pink;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var testNode = document.querySelector("#test");
			
			if(testNode.addEventListener){
				//火狐
				testNode.addEventListener("DOMMouseScroll",function(ev){
					ev=ev||event;
					/*
					向上:负
					向下:正
					*/
					console.log(ev.detail);
				})
			}
			//非火狐浏览器
			testNode.onmousewheel=function(ev){
				ev=ev||event;
				/*
				向上:正
				向下:负
				*/
				console.log(ev.wheelDelta)
			}
			
			
		}
		
		
	</script>
</html>
